/* 页面切换动画
------------------------------- */
/**
* slide-left
 */
.slide-left-enter-active,
.slide-left-leave-active {
  will-change: transform;
  transition: all 0.3s ease;
}

.slide-left-enter-from {
  opacity: 0;
  transform: translateX(60px);
}

.slide-left-leave-to {
  opacity: 0;
  transform: translateX(-60px);
}

/**
* slide-right
 */
.slide-right-enter-active,
.slide-right-leave-active {
  will-change: transform;
  transition: all 0.3s ease;
}

.slide-right-enter-from {
  opacity: 0;
  transform: translateX(-60px);
}

.slide-right-leave-to {
  opacity: 0;
  transform: translateX(60px);
}

/**
* opacity
 */
.opacity-enter-active,
.opacity-leave-active {
  will-change: transform;
  transition: all 0.3s ease;
}

.opacity-enter-from {
  opacity: 0;
}

.opacity-leave-to {
  opacity: 0;
}

/**
 * zoom-inout
 */
.zoom-inout-enter-active,
.zoom-inout-leave-active {
  animation-duration: 0.3s;
}

.zoom-inout-enter-active {
  opacity: 0;
}

.zoom-inout-enter-to {
  -webkit-animation-name: zoomInUp;
  animation-name: zoomIn;
}

.zoom-inout-leave-to {
  -webkit-animation-name: zoomOutDown;
  animation-name: zoomOut;
}
